<template>
    <div>
      <!--搜索框-->
      <el-form :inline="true" :model="queryCondition" @keyup.enter.native="getDataList()">
        <el-form-item>
<!--          <el-input v-model="dataForm.key" placeholder="查询参数" clearable></el-input>-->
          <el-input v-model="queryCondition.name" placeholder="按照姓名查询" clearable></el-input>

        </el-form-item>

        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        </el-form-item>
      </el-form>

      <!--数据表格-->
      <el-table
        :data="taleDataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">

        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>



        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="姓名"
          width="150">
        </el-table-column>

        <el-table-column
          prop="gender"
          header-align="center"
          align="center"
          label="性别"
          width="70">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.gender == 1">男</el-tag>
            <el-tag size="small" v-else-if="scope.row.gender == 0">女</el-tag>
          </template>

        </el-table-column>

        <el-table-column
          prop="age"
          header-align="center"
          align="center"
          label="年龄"
          width="60">
        </el-table-column>

        <el-table-column
          prop="phone"
          header-align="center"
          align="center"
          label="电话"
          width="130">
        </el-table-column>

        <el-table-column
          prop="wechat"
          header-align="center"
          align="center"
          label="微信"
          width="150">
        </el-table-column>

        <el-table-column
          prop="qq"
          header-align="center"
          align="center"
          label="QQ"
          width="130">
        </el-table-column>

        <el-table-column
          prop="email"
          header-align="center"
          align="center"
          label="邮箱"
          width="180">
        </el-table-column>

        <el-table-column
          prop="educationId"
          header-align="center"
          align="center"
          label="学历"
          width="120">
          <template slot-scope="scope">
            <el-tag type="small" v-if="scope.row.educationId == '1'">小学</el-tag>
            <el-tag type="small" v-else-if="scope.row.educationId == '2'">初中</el-tag>
            <el-tag type="small" v-else-if="scope.row.educationId == '3'">高中</el-tag>
            <el-tag type="small" v-else-if="scope.row.educationId == '4'">专科</el-tag>
            <el-tag type="small" v-else-if="scope.row.educationId == '5'">本科</el-tag>
            <el-tag type="small" v-else-if="scope.row.educationId == '6'">211/985普本</el-tag>
            <el-tag type="small" v-else-if="scope.row.educationId == '7'">硕士</el-tag>
            <el-tag type="small" v-else-if="scope.row.educationId == '8'">博士</el-tag>
            <el-tag type="small" v-else-if="scope.row.educationId == '9'">博士后</el-tag>
            <el-tag type="small" v-else-if="scope.row.educationId == '10'">学历不限</el-tag>
            <el-tag type="small" v-else>保密</el-tag>
          </template>


        </el-table-column>

        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="updateUserInfo(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.userInfoId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--dialog弹窗-->
      <el-dialog
        title="用户信息修改"
        width="60%"
        :visible.sync="updateVisitDialog"
      >

        <el-form :model="dataForm"
                 ref="dataForm" @keyup.enter.native="dataFormSubmit()"
                 :inline="true"
        >

          <el-form-item label="真实姓名：" prop="name">
              <el-input v-model="dataForm.name" placeholder="请输入真实姓名"></el-input>
          </el-form-item>

          <el-form-item label="年龄：" prop="age">
              <el-input v-model="dataForm.age" placeholder="请输入年龄"></el-input>
          </el-form-item>

          <el-form-item label="性别：" prop="gender">
            <el-select
              v-model="dataForm.gender"
              clearable
              placeholder="请选择">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="手机号：" prop="phone" label-width="80px">
            <el-input v-model="dataForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>

          <el-form-item label="微信：" prop="wechat">
            <el-input v-model="dataForm.wechat" placeholder="请输入微信号"></el-input>
          </el-form-item>

          <el-form-item label="QQ：" prop="qq" label-width="55px">
            <el-input v-model="dataForm.qq" placeholder="请输入QQ"></el-input>
          </el-form-item>

          <el-form-item label="邮箱：" prop="email" label-width="80px">
            <el-input v-model="dataForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>

          <el-form-item label="学历要求：" prop="positionEducation">
            <el-col :span="18">
              <el-select v-model="dataForm.educationId" placeholder="填写学历要求">
                <el-option
                  v-for="item in educationOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @chang="positionEducationOptionChange">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>


        </el-form>

        <el-button @click="dataFormSubmit()">确认提交</el-button>
        <el-button @click="updateVisitDialog = false">取消修改</el-button>
      </el-dialog>


      <!--分页条-->
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
</template>

<script>
  export default {
    name: 'usermanagerment',
    data(){
      return{
        updateVisitDialog:false,

        educationOption:[],

        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        total:0,

        dataForm:{},
        taleDataList:[],

        dataListLoading: false,
        dataListSelections: [],     //多选出来的数据



        queryCondition:{
          name:undefined
        }

      }
    },
    mounted () {
      this.getDataList()
      this.loadingEnducation()
      this.loadingEducation()
    },
    methods:{
      /*加载学历信息*/
      loadingEducation(){
        this.$http({
          url:this.$http.adornUrl('/common/education/select-option'),
          method:'get'
        })
        .then(data => {
          //console.log("data education==>> ",data)
          if (data.data.code === 0){
            this.educationOption = data.data.data
          }
        })
      },
      /*修改方法*/
      dataFormSubmit(){
        this.$http({
          url:this.$http.adornUrl('/usermanage/usermanagement/update'),
          method:'post',
          data:this.dataForm
        })
        .then(data => {
          if (data.data.code === 0){
            this.$message({
              type:'success',
              message:'修改成功'
            })
            this.updateVisitDialog = false
          }else if (data.data.code === 500){
            this.$message({
              type:'danger',
              message:'修改失败'
            })
            this.updateVisitDialog = false
          }
        })
      },

      updateUserInfo(object){
        object.gender = object.gender.toString()
        object.educationId = object.educationId.toString()
        this.dataForm = object
        this.updateVisitDialog = true
      },

      loadingEnducation(){
        this.$http({
          url:this.$http.adornUrl('/common/education/select-option'),
          method:'get'
        })
        .then(data => {
          this.educationOption = data.data.data
        })
      },

      getDataList(){
        const userId = JSON.parse(sessionStorage.getItem("user_server")).userId
        this.$http({
          url: this.$http.adornUrl('/usermanage/usermanagement/list/' + userId + "/" + this.pageIndex + "/" + this.pageSize),
          method: 'post',
          data:this.queryCondition
        }).then(({data}) => {

          console.log("data totla===",data)
          if (data && data.code === 0){
            this.taleDataList = data.data
            this.total = data.total
          }
        })
      },

      /*批量删除 和单个删除*/
      deleteHandle(id){
        var ids = id ? [id] : this.dataListSelections.map(item => {
          //console.log("item ===> ",item)
          return item.userInfoId
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/usermanage/usermanagement/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },

      selectionChangeHandle (val) {
        console.log("val ===>",val)
        this.dataListSelections = val
      },

      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },


      //加载学历change事件
      positionEducationOptionChange(value){
        console.log("this.dataForm.positionEducation",value)
        this.dataForm.educationId = value
      },

    }
  }
</script>

<style>

</style>
